<template>
  <view class="home u-flex-col">
    <u-navbar
      :background="{ backgroundColor: 'rgb(61, 95, 255)' }"
      title="筛选"
      back-icon-color="#fff"
      title-color="#fff"
    ></u-navbar>

    <view class="u-p-l-20 u-p-r-20 form">
      <u-form :model="form" ref="uForm">
        <u-form-item
          :border-bottom="false"
          :label-style="labelStyle"
          label-position="top"
          label="煤矿名称"
          prop="customerNo"
        >
          <b-select-radio
            v-model="form.customerNo"
            :options="customerList"
            placeholder="请选择煤矿名称"
            :placeholder-style="placeholderStyle"
            :input-style="inputStyle"
            :cancel-style="customStyle"
            :submit-style="submitStyle"
            :search-icon="searchSrc"
            valueKey="id"
          ></b-select-radio>
        </u-form-item>
        <template>
          <u-form-item
            :border-bottom="false"
            :label-style="labelStyle"
            label-position="top"
            label="时间"
            prop="beginDate"
          >
            <div class="time-body">
              <view class="flex date">
                <u-button
                  v-for="(obj, i) in dateTypeList"
                  :key="obj"
                  :type="form.btType === i ? 'primary' : 'default'"
                  class="bt"
                  @click.native="monthDay(i)"
                  >{{ obj }}</u-button
                >
              </view>
              <uni-datetime-picker
                type="date"
                :border="false"
                placeholder="请选择开始日期"
                :start="start"
                :end="end"
                return-type="timestamp"
                v-model="form.beginDate"
                @change="form.btType = ''"
              />
            </div>
          </u-form-item>
          <u-form-item :border-bottom="false" label-position="top" prop="endDate">
            <div class="time-body">
              <uni-datetime-picker
                type="date"
                :border="false"
                placeholder="请选择结束日期"
                :start="start"
                :end="end"
                return-type="timestamp"
                v-model="form.endDate"
                @change="form.btType = ''"
              />
            </div>
          </u-form-item>
        </template>
        <u-form-item
          :border-bottom="false"
          :label-style="labelStyle"
          label-position="top"
          label="处置环节"
          prop="disposalLink"
        >
          <chooseBtn
            :custom-box-style="customBoxStyle"
            :custom-style="customBtnStyle"
            :list="btnListAll"
            :listIsAll="listIsAll"
            @reset="resetBoolean"
            :custom-check-style="customCheckStyle"
            @click="clickDisposalBtn"
          ></chooseBtn>
        </u-form-item>
        <u-form-item
          :border-bottom="false"
          :label-style="labelStyle"
          label-position="top"
          label="处置情况"
          prop="disposalCondition"
        >
          <!-- <singleChooseBtn
            :custom-box-style="customBoxStyle"
            :custom-style="customBtnStyle"
            :list="btnList"
            :custom-check-style="customCheckStyle"
            @click="clickBtn"
          ></singleChooseBtn> -->
          <chooseBtn
            :custom-box-style="customBoxStyle"
            :custom-style="customBtnStyle"
            :list="btnList"
            :listIsAll="listConditionIsAll"
            @reset="resetConditionBoolean"
            :custom-check-style="customCheckStyle"
            @click="clickBtn"
          ></chooseBtn>
        </u-form-item>
        <u-form-item
          :border-bottom="false"
          :label-style="labelStyle"
          label-position="top"
          label="煤矿管辖"
          prop="isSelf"
        >
          <singleChooseBtn
            :custom-box-style="customBoxStyle"
            :custom-style="customBtnStyle"
            :list="isSelfBtnList"
            :custom-check-style="customCheckStyle"
            @click="clickIsSelfBtn"
          ></singleChooseBtn>
        </u-form-item>
        <u-form-item
          :border-bottom="false"
          :label-style="labelStyle"
          label-position="top"
          label="异常类型"
          prop="functionCode"
        >
          <b-select-radio
            v-model="form.functionCode"
            :options="queryList"
            placeholder="请选择异常类型"
            :placeholder-style="placeholderStyle"
            :input-style="inputStyle"
            :cancel-style="customStyle"
            :submit-style="submitStyle"
            :search-icon="searchSrc"
            valueKey="id"
          ></b-select-radio>
          <!-- <u-input
            v-model="form.functionName"
            :placeholder-style="placeholderStyle"
            :custom-style="inputStyle"
            type="select"
            placeholder="请选择异常类型"
            @click="openFunction"
          /> -->
        </u-form-item>
      </u-form>
    </view>
    <view class="confrim-btn u-flex u-row-between u-p-t-20">
      <u-button
        :hair-line="false"
        shape="circle"
        form-type="reset"
        :custom-style="formCustomStyle"
        throttle-time="500"
        @click="reset"
        >重置</u-button
      >
      <u-button
        :hair-line="false"
        shape="circle"
        :custom-style="formSubmitStyle"
        form-type="submit"
        throttle-time="500"
        @click="submit"
        >确定</u-button
      >
    </view>
  </view>
</template>

<script>
import chooseBtn from "@/pages/components/chooseBtn";
import singleChooseBtn from "@/pages/components/singleChooseBtn";

export default {
  name: "screen",
  components: {
    chooseBtn,
    singleChooseBtn,
  },
  data() {
    return {
      dateTypeList: ["当日", "当月"],
      emitEvent: "",
      riskTypeShow: false,
      showTimeStart: false,
      showTimeEnd: false,
      showRadio: false,
      showEmpty: false,
      form: {
        functionCode: "",
        functionName: "",
        btType: "", //时间选择
        disposalLink: "", // 企业处置环节
        disposalCondition: "", // 企业处置情况
        isSelf: "", //煤矿管辖
        customerNo: "", //企业编码
        customerName: "", //企业名称
        beginDate: "", //开始时间
        endDate: "", // 结束时间
      },
      rules: {},
      customBoxStyle: {
        justifyContent: "space-start",
      },
      // 报警状态按钮组组件样式
      customBtnStyle: {
        background: "#fff",
        border: "1px solid #fff",
        padding: "0rpx 20rpx",
        marginRight: "20rpx",
        borderRadius: "32rpx",
        fontWeight: 400,
        color: "#666666",
      },
      customCheckStyle: {
        background: "#fff",
        padding: "0rpx 20rpx",
        marginRight: "20rpx",
        borderRadius: "32rpx",
        border: "1px solid #288CFE",
        fontWeight: 400,
        color: "#288CFE",
      },
      isSelfBtnList: [
        {
          label: "本人管辖",
          checked: false,
          code: "1",
          id: "1",
        },
      ],
      // 报警状态按钮组组件数据，数据checked是是否选中的，默认false布尔值，必填，label也是必填
      btnList: [
        {
          label: "矿处置超时",
          checked: false,
          code: "1",
          id: "1",
        },
        {
          label: "集团核查超时",
          checked: false,
          code: "2",
          id: "2",
        },

        {
          label: "矿临近超时",
          checked: false,
          code: "4",
          id: "4",
        },
        {
          label: "集团临近超时",
          checked: false,
          code: "5",
          id: "5",
        },

        {
          label: "矿超时未处置",
          checked: false,
          code: "7",
          id: "7",
        },
        {
          label: "集团超时未核查",
          checked: false,
          code: "8",
          id: "8",
        },
      ],
      btnListAll: [
        { id: "4", label: "已闭环", checked: false },
        { id: "1", label: "待矿处置", checked: false },
        { id: "2", label: "待集团核查", checked: false },
      ], //处置环节按钮组组件数据，数据checked是是否选中的，默认false布尔值，必填，label也是必填
      listIsAll: true,
      listConditionIsAll: true,
      labelStyle: {
        color: "#333333",
        fontWeight: "600",
      },
      functionCodesList: [],
      alarmTypesList: [],
      params: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: true,
      },
      searchData: {},
      inputStyle: {
        background: "#fff",
        height: "80rpx",
        paddingLeft: "80rpx",
        color: "#999999",
        borderRadius: "20rpx",
      },
      placeholderStyle: "color:#999999;",
      searchSrc: require("@/static/image/search.png"),
      formCustomStyle: {
        color: "#000",
        border: "1rpx solid #ddd",
        background: "#fff",
        width: "40%",
      },
      formSubmitStyle: {
        color: "#ffffff",
        background: "#288CFE",
        width: "40%",
        border: "none",
      },
      customStyle: {
        // 注意驼峰命名，并且值必须用引号包括，因为这是对象
        color: "#333333",
        background: "#eeeeee",
        borderRadius: "20rpx",
        width: "40%",
        border: "none",
      },
      submitStyle: {
        color: "#fff",
        background: "#288CFE",
        borderRadius: "20rpx",
        width: "40%",
        border: "none",
      },
      customerList: [],
      start: "",
      end: "",
      queryList: [],
    };
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  async mounted() {
    await this.getCustomerList();
    await this.getQueryList();
    this.initBtn();
    this.initTime();
  },
  methods: {
    /**
     * 初始时间范围
     */
    initTime() {
      const { beginDate, endDate } = this.form;
      if (beginDate && endDate) {
      } else {
        const time = this.$getStartAndEndTimeByEndTime(Date.now(), 24);
        this.start = time.startTime.substring(0, 10);
        this.end = time.endTime.substring(0, 10);
      }
    },
    monthDay(val) {
      const date = this.$u.date();
      this.form.btType = val;
      if (val === 0) {
        this.form.beginDate = date.substring(0, 10);
        this.form.endDate = date.substring(0, 10);
      } else {
        this.form.beginDate = this.$timeScopeThisMonth()[0].substring(0, 10);
        this.form.endDate = date.substring(0, 10);
      }
    },
    verification() {
      let isSubmit = false;
      const date = new Date(this.form.endDate);
      const dateStart = new Date(this.form.beginDate);
      if (date && dateStart && dateStart.getTime() > date.getTime()) {
        uni.showToast({
          title: "结束时间必须大于开始时间",
          icon: "none",
        });
        isSubmit = false;
      } else {
        isSubmit = true;
      }
      return isSubmit;
    },
    resetBoolean() {
      this.listIsAll = false;
    },
    resetConditionBoolean() {
      this.listConditionIsAll = false;
    },
    initBtn() {
      // if (this.form.disposalCondition) {
      //   for (let i = 0; i < this.btnList.length; i++) {
      //     if (this.btnList[i].code === this.form.disposalCondition) this.btnList[i].checked = true;
      //   }
      // } else {
      //   for (let i = 0; i < this.btnList.length; i++) {
      //     this.btnList[i].checked = false;
      //   }
      // }
      if (this.form.isSelf) {
        for (let i = 0; i < this.isSelfBtnList.length; i++) {
          if (this.isSelfBtnList[i].code === this.form.isSelf) this.isSelfBtnList[i].checked = true;
        }
      } else {
        for (let i = 0; i < this.isSelfBtnList.length; i++) {
          this.isSelfBtnList[i].checked = false;
        }
      }
      if (this.form.disposalLink) {
        let arr = [];
        arr = this.form.disposalLink.split(",");
        for (let i = 0; i < this.btnListAll.length; i++) {
          if (arr.includes(this.btnListAll[i].id)) {
            this.btnListAll[i].checked = true;
          }
        }
        let j = 0;
        for (let i = 0; i < this.btnListAll.length; i++) {
          if (this.btnListAll[i].checked) {
            j++;
          }
        }
        if (j === this.btnListAll.length) {
          this.listIsAll = false;
        }
      }
      if (this.form.disposalCondition) {
        let arr = [];
        arr = this.form.disposalCondition.split(",");
        for (let i = 0; i < this.btnList.length; i++) {
          if (arr.includes(this.btnList[i].id)) {
            this.btnList[i].checked = true;
          }
        }
        let j = 0;
        for (let i = 0; i < this.btnList.length; i++) {
          if (this.btnList[i].checked) {
            j++;
          }
        }
        if (j === this.btnList.length) {
          this.listConditionIsAll = false;
        }
      }
    },
    //企业处置情况按钮方法
    clickBtn(res) {
      let arr = [];
      if (res.length !== 0) {
        for (let i = 0; i < res.length; i++) {
          arr.push(res[i].id);
        }
        this.form.disposalCondition = arr.toString();
      } else {
        this.form.disposalCondition = "";
      }
    },
    //煤矿管辖按钮方法
    clickIsSelfBtn(res) {
      if (res) {
        this.$set(this.form, "isSelf", res.code);
      }
    },
    //处置环节按钮方法
    clickDisposalBtn(res) {
      let arr = [];
      if (res.length !== 0) {
        for (let i = 0; i < res.length; i++) {
          arr.push(res[i].id);
        }
        this.form.disposalLink = arr.toString();
      } else {
        this.form.disposalLink = "";
      }
    },
    //获取企业名称列表
    async getCustomerList() {
      const res = await this.$get(
        `/guard/common/getCustomers?countyNo=${this.form.countyNo ? this.form.countyNo : ""}`
      );
      if (res && res.body) {
        this.customerList = res.body.map((item) => {
          return { ...item, name: item.label, disabled: false };
        });
      }
    },
    async getQueryList() {
      const { body } = await this.$get("/analyzeReports/queryList?monitorId=");
      if (body) {
        this.queryList = body.map((item) => {
          return { ...item, name: item.label, disabled: false };
        });
      }
    },

    submit() {
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          const params = {
            ...this.form,
            beginDate: this.form.beginDate ? this.$date(this.form.beginDate).substring(0, 10) : "",
            endDate: this.form.endDate ? this.$date(this.form.endDate).substring(0, 10) : "",
          };
          if (this.verification()) {
            uni.$emit(this.emitEvent, params);
            uni.navigateBack({
              delta: 1,
            });
          } else {
            return;
          }
        } else {
        }
      });
    },
    reset() {
      this.form = {
        ...this.form,
        btType: "", //时间选择
        functionCode: "",
        functionName: "",
        disposalLink: "", // 企业处置环节
        disposalCondition: "", // 企业处置情况
        isSelf: "", //煤矿管辖
        customerNo: "", //企业编码
        customerName: "", //企业名称
        beginDate: this.$date(Date.now()).substring(0, 10), //开始时间
        endDate: this.$date(Date.now()).substring(0, 10), // 结束时间
      };
      this.initBtn();
      this.initTime();
      for (let i = 0; i < this.btnListAll.length; i++) {
        this.btnListAll[i].checked = false;
      }
      for (let i = 0; i < this.btnList.length; i++) {
        this.btnList[i].checked = false;
      }
      this.listIsAll = true;
      this.listConditionIsAll = true;
      uni.$emit("handClickScreen", this.form);
      this.$refs.uForm.resetFields(this.rules);
    },
  },
  onLoad(options) {
    const { form, emitEvent } = options;
    if (form) {
      this.form = JSON.parse(form);
    }
    this.emitEvent = emitEvent;
    this.form.countyNo = getApp().globalData.userInfo.countyNo;
  },
};
</script>

<style lang="scss" scoped>
// 背景
page {
  background: #f7f7fa;
}
.home {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  .date {
    margin: 1rem 0;

    .bt {
      border-radius: 50px;
      flex-basis: 45%;

      &:after {
        border-radius: 50px;
      }
    }
  }

  .form {
    height: calc(100% - 130px);
    /deep/.u-form {
      height: 100%;
      overflow: auto;
    }
    /deep/.u-form-item {
      padding: 0;
    }
    /deep/.u-input {
      .u-input__right-icon--select {
        display: none;
      }
    }
    .summ {
      width: 100%;
      padding: 0rpx 28rpx;
      justify-content: space-between;
      > view {
        background: #fff;
        border-radius: 8rpx;
        text-align: center;
        color: #999;
        font-weight: bold;
        width: 48%;
        padding: 20rpx;
        > text {
          &:first-child {
            color: #3d5fff;
            padding-right: 10rpx;
          }
        }
      }
    }
  }
  .popup-content {
    padding: 24rpx;
    text-align: center;
    .checkbox {
      &-item {
        height: 100rpx;
        /deep/.u-checkbox__label {
          width: 100%;
          text-align: left;
        }
      }
      /deep/.u-checkbox-group {
        display: inline;
        .u-checkbox {
          border-bottom: 1px solid #dddddd;
          justify-content: space-between;
          flex-flow: row-reverse;
          .u-checkbox__icon-wrap {
            background: rgba(1, 72, 51, 0.2);
            border: none;
          }
        }
      }
      /deep/.u-radio-group {
        display: inline;
        .u-radio {
          border-bottom: 1px solid #dddddd;
          justify-content: space-between;
          flex-flow: row-reverse;
          height: 90rpx;
          .u-radio__icon-wrap {
            background: rgba(1, 72, 51, 0.2);
            border: none;
          }
        }
      }
    }
  }
  .confrim-btn {
    position: absolute;
    width: 100%;
    bottom: 20rpx;
    z-index: 1;
  }
}

.time-body {
  position: relative;
  width: 100%;
}
</style>
